<template>
  <div class="search-hurdle">
    <div class="left">
      <i class="iconfont">&#xe650;</i>
      <input v-if="haveKeyup"
             v-model.trim="text"
             autofocus
             v-focus
             @focus="focus"
             @keyup="keyup"
             @blur="blur"
             :placeholder="placeholder">
      <input v-else
             v-model.trim="text"
             @focus="focus"
             @keyup="keyup"
             @blur="blur"
             :placeholder="placeholder">
      <i class="iconfont clear" v-show="showClear" @click="clearText">&#xe64e;</i>
    </div>
    <div class="right">
      <div @click="search">搜索</div>
    </div>
  </div>
</template>
<!--搜索栏-->
<script>
  export default {
    name: 'searchHurdle',

    props: {
      value: {
        type: String,
        required: true
      },
      haveKeyup: { // 默认是否弹起键盘
        type: Boolean,
        default: true
      },
      placeholder: {
        type: String,
        default: '请填写'
      }
    },

    watch: {
      value (newVal) {
        this.text = newVal;
      },

      text (newVal) {
        if (!newVal) {
          this.showClear = false
        }
        this.$emit('input', newVal)
      }
    },

    data () {
      return {
        text: this.value,
        // 显示清除按钮
        showClear: false
      }
    },
    directives: {
      focus: {
        // 输入框自动获取焦点
        inserted: function (el) {
          el.focus()
        }
      }
    },

    mounted () {
    },

    methods: {
      // 清除输入框的value
      clearText () {
        this.text = ''
        this.$emit('blur', this.text)
      },

      // 取消 搜索切换
      focus () {
        if (this.text) {
          this.showClear = true
        }
        this.$emit('focus')
      },

      // 失去焦点返回最新的值
      blur () {
        this.showClear = false
        this.$emit('blur', this.text)
      },

      keyup () {
        if (this.text) {
          this.showClear = true
        }
        this.$emit('keyup', this.text)
      },

      search () {
        this.$emit('search')
      }
    }
  }
</script>

<style scoped lang="scss">
  .search-hurdle {
    display: -webkit-box;
    align-items: center;

    .left {
      display: flex;
      background: rgba(251, 251, 251, 1);
      border-radius: 6px;
      padding: 6px 8px 6px 12px;
      align-items: center;
      flex: 1;

      i {
        color: #A7AEBC;
        font-size: 22px;
        height: 24px;
      }

      input {
        background: rgba(251, 251, 251, 1);
        flex: 1;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #355166;
        line-height: normal;
        height: 24px;
        padding-left: 5px;

        &::placeholder {
          color: rgba(167, 174, 188, 1);
        }
      }

      .clear {
        color: #979797;
      }
    }

    .right {
      margin-left: 16px;
      font-size: 17px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      line-height: normal;
      color: rgba(70, 126, 234, 1);
      white-space: nowrap;
    }
  }
</style>
